<template>
  <el-aside width="240px" class="elAside">
    <div>
      <!--头部文件管理系统-->
      <div class="logo_box">
        <div class="logo_img"></div>
      </div>
      <el-menu
        default-active="1"
        exact
        class="el-menu-vertical-demo el_menu_box"
        router
        @open="handleOpen"
        @close="handleClose"
      >
        <el-menu-item
          index="1"
          v-for="(v, i) in navList"
          :key="i"
          :route="v.path"
          :class="{ active: i == itemIndex ? true : false }"
          @click="changeActive(i)"
        >
          <i :class="v.navIcon"></i>
          <span slot="title">{{ v.info }}</span>
        </el-menu-item>
      </el-menu>
    </div>
    <!--aside-footer-->
    <div class="aside_footer">
      <div class="storage_info">
        <!-- <el-progress
          width="180"
          stroke-linecap="square"
          :percentage="40"
          :format="format"
        ></el-progress> -->
        <div class="p">1234.12GB/5000GB</div>
        <div class="load">
          <div class="left"></div>
        </div>
      </div>
      <div class="user_info">
        <img src="../../assets/img/touxiang.jpg" alt="" />
        <span>aYin</span>
        <i class="iconfont icon-icon_chakan" @click="infoChange"></i>
        <div class="info" v-show="infoShow">
          <ul>
            <li>个人资料</li>
            <li>修改密码</li>
            <li>风格设置</li>
            <li>帮助</li>
            <li>关于</li>
          </ul>
          <div class="border"></div>
          <ul>
            <li>退出登录</li>
          </ul>
        </div>
      </div>
    </div>
  </el-aside>
</template>
<script>
export default {
  data() {
    return {
      navList: [
        {
          navIcon: "iconfont icon-24gl-fileEmpty",
          info: "个人文件",
          path: "/personal",
        },
        {
          navIcon: "iconfont icon-wenjianshu",
          info: "部门文件",
          path: "/department",
        },
        { navIcon: "iconfont icon-gongsi", info: "公司文件", path: "/company" },
        {
          navIcon: "iconfont icon-shoucang",
          info: "收藏夹",
          path: "/collection",
        },
        { navIcon: "iconfont icon-fenxiang", info: "我的分享", path: "/share" },
        {
          navIcon: "iconfont icon-huishouzhan",
          info: "回收站",
          path: "/recycle",
        },
      ],
      itemIndex: "", //添加active类的序号
      infoShow: false, //控制个人信息显示状态
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    changeActive(i) {
      return (this.itemIndex = i);
    },
    infoChange() {
      this.infoShow = !this.infoShow;
    },
    // format(percentage) {
    //   return percentage === 100 ? "满" : `${percentage}%`;
    // },
  },
};
</script>
<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

/* navAside的css */
.active {
  background-color: rgba(255, 255, 255, 0.1);
}

@import url("../../assets/css/navAside/style.css");
</style>